let vm = new Vue({
    el: '.main-content',
    data: function () {
        return {
            pageInfo: {},
            office: '',
            condition: {
                sid: '',
                name: ''
            },
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: "parentId"
                    },

                },
                callback: {
                    onClick: this.onClick,
                    eforeEditName: this.beforeEditName,   //点击编辑按钮事件回调，根据返回值是否进入名字编辑状态
                    beforeRemove: this.beforeRemove //根据返回值确定是否删除
                },
                view: {
                    addHoverDom: this.addHoverDom,   //自定义添加组件回调
                    removeHoverDom: this.removeHoverDom,  //自定义移除组件回调
                },
                edit: {
                    enable: true,
                    removeTitle: "删除",
                    renameTitle: "修改"
                }
            },
            nodes: []
        }
    },
    methods: {
        selectPage: function (pageNum = 1, pageSize = 10) {
            axios({
                url: `mapper/office/selectPage/${pageNum}/${pageSize}`,
                params: this.condition
            }).then(response => {
                this.pageInfo = response.data.obj;
            }).catch(error => {
                console.log(error.message)
            })
        },
        selectAll: function () {
            //查询全部：  1.清空查询条件对象值  2.调用selectPage
            this.condition = {
                sid: '',
                name: ''
            };
            this.selectPage();
        },

        selectName: function () {
            //清空id条件
            this.condition.sid = '';
            this.selectPage();
        },

        toUpdate: function (office) {
            layer.obj = office;
            layer.open({
                type: 2,
                title: false,
                area: ['70%', '70%'],
                content: 'mapper/office/toUpdate',
                end: () => {
                    layer.msg("更新完成")
                    this.selectPage();
                }
            })
        },
        // 删除
        doDelete: function (office) {
            layer.msg('是否删除', {
                time: 20000, //20s后自动关闭
                btn: ['是', '否'],
                yes: () => {
                    //删除标记（0：正常；1：删除；2：审核；）
                    office.delFlag = "1";
                    axios({
                        url: "mapper/office/doUpdate",
                        method: "post",
                        data: office,
                    }).then(response => {
                        layer.msg(response.data.msg)
                        this.selectPage();//刷新页面
                    }).catch(error => {
                        layer.msg(error.message)
                    });
                }
            });
        },


        init: function () {
            //初始化nodes数据
            axios({
                url: "mapper/office/selectAll"
            }).then(response => {
                this.nodes = response.data.obj;
                this.nodes[this.nodes.length] = {"id": 0, "name": "机构列表"};
                $.fn.zTree.init($("#treeMenu"), this.setting, this.nodes);
            }).catch(error => {
                layer.msg(error.message)
            })
        },

        onClick: function (event, treeId, treeNode) {
            if (treeNode.sid === 0) {
                this.condition.sid = null;
            } else {
                this.condition.sid = treeNode.id;
                this.name = ""
            }
            this.selectPage();
        },


        addHoverDom: function (treeId, treeNode) {
            /**
             * 1.获取当前的组件所在的li的id
             * 2.根据选择器获取元素节点对象，如果存在则阻止继续创建，不存在则创建节点对象
             * 3.绑定点击事件
             */
                // console.log(treeNode.tId);
            let tId = treeNode.tId;
            let spanObj = $(`#${tId}_add`);
            if (spanObj.length > 0) {
                return
            }
            let span = `<span class="button add" id="${tId}_add" title="新增" style="" treenode_add=""></span>`;
            //绑定点击事件
            // 函数名()调用函数    函数名   绑定函数对象
            //通过选择器选中元素使用on绑定
            $(`#${tId}_a`).append(span);


        },
        removeHoverDom: function (treeId, treeNode) {
            $(`#${treeNode.tId}_add`).unbind().remove();
        },
        beforeEditName: function (treeId, treeNode) {
            console.log(treeNode);
            return false;
        },
        beforeRemove: function (treeId, treeNode) {

        },

    },
    created: function () {
        this.selectPage();
        this.init();
    }
});